<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">
    <style>
        .radio-inline input[type=radio] {
            margin-top: 0px
        }
        .colorRed{color:red;}
        .bqName{padding: 2px 4px;border-radius: 6px;background: #f66;cursor: pointer;}
    </style>

</head>

<body class="white-bg" style="color:#333;padding:3px;">
<div class="white-bg setRemindPeopleK" style="margin:10px">
    <form action="" class="form-inline" id="add" method="post">
        <table class="table-bordered table text-center" id="comp_table">
            <tr class="info">
                <td colspan="6" class="text-left">竞品管理(如果没有可不填)</td>
            </tr>
            <tr class="info">
                <td>竞品品类</td>
                <td>竞品名称</td>
                <td>零售价(元)</td>
                <td>竞品规格</td>
                <td>竞品描述</td>
                <td><a href="javascript:;" rol="button" class="btn btn-success" id="addCompetitor">添加</a></td>
            </tr>
            <tr>
                <td>
                    <select name="com[cate][]" class="com_cate">
                        <option value="">请选择</option>
                        {volist name="com_cate" id="row"}
                        <option value="{$row.id}">{$row.category_name}</option>
                        {/volist}
                    </select>
                </td>
                <td>
                    <select name="com[id][]" class="competitor">
                        <option value="">请选择</option>
                    </select>
                </td>
                <td>
                    <input name="com[price][]" type="text" class="form-control">
                </td>
                <td>
                    <input name="com[specs][]" type="text" class="form-control">
                </td>
                <td>
                    <input name="com[brief][]" type="text" class="form-control" style="min-width: 240px;width: 240px">
                </td>
                <td><a href="javascript:;" class="btn-danger btn delCompetitor">删除</a></td>
            </tr>
        </table>

        <div class="col-md-12 text-center" style="padding: 10px 0">
            <button class="btn-success btn" id="tijiao">确认并提交</button>
            <button class="btn-warning btn" id="cancelBack">返回</button>
        </div>

    </form>
</div>

<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
<script>
    $(function () {

        $('#addCompetitor').on('click',function () {
            $('#comp_table').append('<tr>\n' +
                '                <td>\n' +
                '                    <select name="com[cate][]" class="com_cate">\n' +
                '                        <option value="">请选择</option>\n' +
                '                        {volist name="com_cate" id="row"}\n' +
                '                        <option value="{$row.id}">{$row.category_name}</option>\n' +
                '                        {/volist}\n' +
                '                    </select>\n' +
                '                </td>\n' +
                '                <td>\n' +
                '                    <select name="com[id][]" class="competitor">\n' +
                '                        <option value="">请选择</option>\n' +
                '                    </select>\n' +
                '                </td>\n' +
                '                <td>\n' +
                '                    <input name="com[price][]" type="text" class="form-control">\n' +
                '                </td>\n' +
                '                <td>\n' +
                '                    <input name="com[specs][]" type="text" class="form-control">\n' +
                '                </td>\n' +
                '                <td>\n' +
                '                    <input name="com[brief][]" type="text" class="form-control" style="min-width: 240px;width: 240px">\n' +
                '                </td>\n' +
                '                <td><a href="javascript:;" class="btn-danger btn delCompetitor">删除</a></td>\n' +
                '            </tr>');
        })
        $('body').on('click','.delCompetitor',function () {
            $(this).closest('tr').remove()
        })
    })
</script>
<script>
    $(document).ready(function () {

            //选择竞品分类
            $('body').on('change','.com_cate',function () {
                var id = $(this).val()
                $(this).closest('td').next('td').find('.competitor').load('{:url("select/competitor")}?catid='+id)
            })

            //选择竞品
            $('body').on('change','.competitor',function () {
                var _this = this;
                var id = $(this).val()
                $.get('{:url("format")}?id='+id,function (data) {
                    $(_this).closest('td').next('td').next('td').find('input').val(data);
                })
            })


    })

</script>
<script>
    var cancelBack = document.getElementById('cancelBack')
    cancelBack.onclick = function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    //提交
    $('#tijiao').on('click',function () {
        var form =  $('#add')
        var serial = form.serialize()

        $.ajax({
            'type':'post',
            'url':form.attr('action'),
            'data':serial,
            'dataType':'json',
            'success':function (data) {
                if(data.success){
                    swal({
                        title: data.msg,
                        type: "success"
                    },function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name))
                        });

                }else
                    swal({
                        title: data.msg,
                        type: "warning"
                    });
            }
        })
        return false
    })

</script>
</body>

</html>